<template>
  <div>
    <div id="search">
      <el-form style="width:500px" :model="form">
        按日期查询(起始/某一天)
        <el-form-item style="display:flex;align-items:center;height:40px;">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 30%;"></el-date-picker>
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 30%;"></el-date-picker>
          <el-button style="height:100%;width: 15%;" type="success" @click="search">查询</el-button>
          <el-button style="height:100%;width: 15%;" type="success" @click="refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display:flex;justify-content: space-around;">
      <div id="main" style="width: 500px;height: 400px;"></div>
      <div id="zhe" style="width: 500px;height: 400px;"></div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapMutations, mapGetters } from 'vuex';
import { time } from '@/utils/time';
export default {
  data() {
    return {
      charts: '',
      chartszhe: '',
      form: {},
      text: '',
      opinion: ['已挂号人数', '未挂号人数', '已计价', '未计价'],
      opinionValue: [],
      opinionValue2: [],
      zuori: [],

      date: '',
    };
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPie('main');
      this.drawPiejm('zhe');
    });
  },
  created() {
    this.isgua();
    this.preGua();
  },
  methods: {
    ...mapActions(['tongyong']),
    refresh() {
      this.form = {};
      this.isgua();
    },
    //已挂号人数
    isgua() {
      this.date = time(new Date());
      //this.date = '2021-05-13'
      //console.log(this.date)
      this['tongyong']({
        name: 'TONGJI_TODAY',
        data: this.date,
      }).then(resp => {
        console.log(resp.data.data);
        let arr = [];
        for (let i in resp.data.data) {
          arr.push(resp.data.data[i]); //属性
          //arr.push(obj[i]); //值
        }
        arr.splice(4);
        this.opinionValue = arr;
        this.opinionValue2 = arr;
      });
    },
    //昨日
    preGua() {
      console.log(this.opinionValue);
      let nowday = new Date();
      let date;
      nowday.setTime(nowday.getTime() - 24 * 60 * 60 * 1000);
      if (nowday.getMonth() + 1 < 10) {
        date = nowday.getFullYear() + '-' + '0' + (nowday.getMonth() + 1) + '-' + nowday.getDate();
        console.log(date);
      } else {
        date = nowday.getFullYear() + '-' + (nowday.getMonth() + 1) + '-' + nowday.getDate();
        console.log(date);
      }
      this['tongyong']({
        name: 'TONGJI_TODAY',
        data: date,
      }).then(resp => {
        //console.log(resp.data.data)

        for (let i in resp.data.data) {
          this.zuori.push(resp.data.data[i]); //属性
          //arr.push(obj[i]); //值
        }
        this.zuori.splice(4);
        //console.log(this.zuori)
        //this.drawPiejm('zhe')
      });
    },
    search() {
      this.opinionValue = [];
      if (this.form.date1) {
        if (this.form.date2) {
          let beginDte = this.form.date1;
          let lastDate = this.form.date2;
          this['tongyong']({
            name: 'TONGJI_WEEK',
            data: { beginDte, lastDate },
          }).then(resp => {
            console.log(resp.data.data);
            for (let i in resp.data.data) {
              this.opinionValue.push(resp.data.data[i]); //属性
              //arr.push(obj[i]); //值
            }
            this.opinionValue.splice(4);
          });
        } else {
          console.log('888');
          let date = time(this.form.date1);
          console.log(this.form.date1);
          console.log(date);
          this['tongyong']({
            name: 'TONGJI_TODAY',
            data: date,
          }).then(resp => {
            console.log(resp.data.data);
            for (let i in resp.data.data) {
              this.opinionValue.push(resp.data.data[i]); //属性
              //arr.push(obj[i]); //值
            }
            this.opinionValue.splice(4);
            console.log(this.opinionValue);
          });
        }
      } else {
        if (this.form.date2) {
          let date = time(this.form.date2);
          console.log(this.form.date2);
          console.log(date);
          this['tongyong']({
            name: 'TONGJI_TODAY',
            data: date,
          }).then(resp => {
            console.log(resp.data.data);
            for (let i in resp.data.data) {
              this.opinionValue.push(resp.data.data[i]); //属性
              //arr.push(obj[i]); //值
            }
            this.opinionValue.splice(4);
            console.log(this.opinionValue);
          });
        } else {
          this.$message('请选择查询日期');
        }
      }
    },
    //今日统计
    drawPie(id) {
      console.log(this.opinionValue);
      if (!this.form.date1 && !this.form.date2) {
        this.text = '今日挂号统计';
      } else if (this.form.date1) {
        if (!this.form.date2) {
          this.text = time(this.form.date1) + '挂号统计';
        } else {
          this.text = '' + time(this.form.date1) + '-' + time(this.form.date2) + '挂号统计';
        }
      }
      if (document.getElementById(id) == null) {
        return;
      }
      this.$echarts.dispose(document.getElementById(id));
      this.charts = this.$echarts.init(document.getElementById(id));
      this.charts.setOption({
        barWidth: 40,
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c}',
        },
        title: {
          text: this.text,
          subtext: '挂号&计价',
        },
        xAxis: {
          type: 'category',
          data: this.opinion, //data里的数组
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '今日统计',
            data: this.opinionValue,
            type: 'bar',

            //改变颜色
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#5470C7', 'red', '#5470C7', 'red'];
                  return colorList[params.dataIndex];
                },
              },
            },

            // //改变颜色
            // itemStyle:{
            //   normal:{
            //     color:function(params){
            //       var colorList = ['#5470C7','red','#5470C7','red']
            //       return colorList[params.dataIndex]
            //     }
            //   }
            // },
            //顶部显示数字
            label: {
              show: true,
              position: 'top',
            },
          },
        ],
      });
    },
    //前后对比
    drawPiejm(id) {
      if (document.getElementById(id) == null) {
        return;
      }
      this.$echarts.dispose(document.getElementById(id));
      this.chartszhe = this.$echarts.init(document.getElementById(id));
      this.chartszhe.setOption({
        title: {
          text: '统计对比',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['今日统计', '昨日统计'],
        },
        toolbox: {
          show: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.opinion,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
          },
        },
        series: [
          {
            name: '今日统计',
            type: 'line',
            data: this.opinionValue,
            //顶部显示数字
            label: {
              show: true,
              position: 'top',
            },
          },
          {
            name: '昨日统计',
            type: 'line',
            data: this.zuori,
            //顶部显示数字
            label: {
              show: true,
              position: 'top',
            },
          },
        ],
      });
    },
  },
  watch: {
    opinionValue: {
      deep: true,
      handler(val, oldval) {
        val && this.drawPie('main');
        //console.log(val)
      },
    },
    opinionValue2: {
      deep: true,
      handler(val, oldval) {
        val && this.drawPiejm('zhe');
        //console.log(val)
      },
    },
    zuori: {
      deep: true,
      handler(val, oldval) {
        val && this.drawPiejm('zhe');
        //console.log(val)
      },
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>
